<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/pages/include/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <title>角色列表</title>
    <%@ include file="/WEB-INF/pages/include/baseCSS.jsp"%>
    <link href="${ctxStatic}/vendor/plugins/layer-v2.3/layer/skin/layer.css" rel="stylesheet">
    <SCRIPT type='text/javascript'>
	</SCRIPT>
</head>

<body>
  <!-- Begin: Content -->
  <section id="content" class="table-layout animated fadeIn" style="background:#eeeeee">
	  <!-- begin: .tray-center -->
	  <div class="tray tray-center">
	  	  <!-- Begin: Admin Panel Wrapper -->
          <div class="admin-panels mw900 center-block" style="padding-bottom: 125px;">
		  <div class="row" id="spy1">
			  <div class="col-sm-12 admin-grid">
			 	<div class="panel panel-info" id="rolelist" data-panel-fullscreen="fasle" data-panel-color="true" data-panel-title="false" data-panel-remove="false" data-panel-collapse="false" >
			       <div class="panel-heading">
			         <span class="panel-icon">
                        <i class="fa fa-table"></i>
                      </span>
			         <span class="panel-title">
			           	角色管理
			         </span>
			         <span class="panel-controls">
			         	<a href="#" id="add" class="fa fa-plus" style="line-height:50px;"></a>
			         </span>
			       </div>
			       <div class="panel-body pn">
			         <div class="table-responsive">
			           <div class="bs-component">
			             <form class="admin-form" action="${ctx}/role/list/" method="post">
				             <table class="table table-hover" >
				               <thead>
				                 <tr class="system">
				                 	<th>选择</th>
				                 <!--   <th>编号</th> -->
				                   <th>键值</th>
				                   <th>名称</th>
				                   <th>描述</th>
				                   <th>操作</th>
				                 </tr>
				               </thead>
				               <tbody>
				                <c:forEach var="role" items="${page.list}" varStatus="status">
					             	<tr>
					             	  <td class="">
				                        <label class="option block mn">
				                          <input type="checkbox" name="mobileos" value="FR">
				                          <span class="checkbox mn"></span>
				                        </label>
				                       </td>
					                   <%-- <td>${status.index+1}</td> --%>
					                   <td>${role.rolekey}</td>
					                   <td>${role.rolename}</td>
					                   <td>${role.description}</td>
					                   <td> 
						                   <div class="bs-component" style="float:right">
						                      <button id="${role.id}" name="bind" type="button" onclick="toBind('${role.id}')" class="btn btn-sm btn-hover btn-success">权限绑定</button>
						                   	  <button name="edit" type="button" onclick="toEdit('${role.id}')" class="btn btn-sm btn-hover btn-primary">修改</button>
							                  <button name="delete" type="button" onclick="toDel('${role.id}')" class="btn btn-sm btn-hover btn-danger">删除</button>
							               </div>
						               </td>
					                 </tr>
				            	</c:forEach>
				               </tbody>
				             </table>
			             </form>
			             <%@ include file="/WEB-INF/pages/basic/paginator.jsp"%>
			           </div>
			         </div>
			       </div>
			     </div>
			  </div>
		  </div>
		  </div>
	  </div>
	    <!-- begin: .tray-left -->
        <aside class="tray tray-right tray200" data-tray-height="match">
        	<div>
        		<h4> 角色-权限绑定</h4><br/>确认需要的权限！&nbsp;&nbsp;&nbsp;<button name="queren" type="button" onclick="toUnBind()" class="btn btn-sm btn-hover btn-default">确认</button>
        	</div>
            <div class="simple-tree" data-tree-id="permtree" data-tree-url="${ctx}/role/permtree" data-tree-checktype="check" />
        </aside>
        <!-- end: .tray-left -->
  </section>
<!-- START: PAGE SCRIPTS -->
<%@ include file="/WEB-INF/pages/include/baseJS.jsp"%>
  <script type="text/javascript">
  //绑定或取消权限绑定
  function toBind(id){
	  var isDefaultClass = $("#"+id).hasClass('btn-default');
	  $("button[name='bind']").html("权限绑定").removeClass("btn-default").addClass("btn-success");
	  if(isDefaultClass){
		  $("button[name='queren']").removeClass("btn-success").addClass("btn-default");
		  var zTree = $.fn.zTree.getZTreeObj("permtree");
		  zTree.setting.async.url="${ctx}/role/permtree";
		  zTree.reAsyncChildNodes(null, "refresh");
		  return;
	  }
	  $("#"+id).html("取消绑定").removeClass("btn-success").addClass("btn-default");
	  $("button[name='queren']").removeClass("btn-default").addClass("btn-success").data("roleid",id);
	  var zTree = $.fn.zTree.getZTreeObj("permtree");
	  zTree.setting.async.url="${ctx}/role/permtree?roleid="+id;
	  zTree.reAsyncChildNodes(null, "refresh");
  }
  
  //确认权限绑定
  function toUnBind(){
	  if($("button[name='queren']").hasClass('btn-default'))
		  return;
	  var zTree = $.fn.zTree.getZTreeObj("permtree"),nodes = zTree.getCheckedNodes(true);
      var ids = "",roleid=$("button[name='queren']").data("roleid");
	  for (var i=0, l=nodes.length; i<l; i++) {
		  ids += nodes[i].id + ",";
	  }
	  if (ids.length > 0 ) ids = ids.substring(0, ids.length-1);
	  parent.toConfirm({url:'${ctx}/role/saveroleperm',
		  data:{'ids':ids,'roleid':roleid},
		  confirmMsg:'是否保存角色权限？',
		  showMsg:'保存成功！',
		  success:function(){
			  $("button[name='bind']").html("权限绑定").removeClass("btn-default").addClass("btn-success");
			  $("button[name='queren']").removeClass("btn-success").addClass("btn-default");
			  var zTree = $.fn.zTree.getZTreeObj("permtree");
			  zTree.setting.async.url="${ctx}/role/permtree";
			  zTree.reAsyncChildNodes(null, "refresh");
		  }
		  });
	  
  }
  
  //删除角色
  function toDel(id){
	  parent.toDelete({
		  url:'${ctx}/role/delete',
		  data:{'id':id},
		  success:function(){
			  $(".admin-form").submit();
			  return false;
		  }
	  });
  };
  
  //编辑角色
  function toEdit(id){
	  parent.openWindow({
		  url:'${ctx}/role/form?id='+id,//iframe页面
		  title:'修改角色',//弹出窗标题
		  width:'500px',//弹出窗宽度
		  height:'480px',//弹出窗高度
		  formName:'role-form',//form表单
		  submitUrl:'${ctx}/role/save',//form表单提交地址
		  success:function(){
			  $(".admin-form").submit();
			  return false;
		  }
	  });
  };
  
  jQuery(document).ready(function() {
	  //新增角色
	 $('#add').click(function(){
		  parent.openWindow({
			  url:'${ctx}/role/form',//iframe页面
			  title:'新增角色',//弹出窗标题
			  width:'500px',//弹出窗宽度
			  height:'480px',//弹出窗高度
			  formName:'role-form',//form表单
			  submitUrl:'${ctx}/role/save',//form表单提交地址
			  success:function(){
				  $(".admin-form").submit();
				  return false;
			  }
		  });
	  });
	 
    // Because we are using Admin Panels we use the OnFinish
    // callback to activate the demoWidgets. It's smoother if
    // when we let the panels be moved and organized before
    // filling them with content from various plugins

    // Init plugins used on this page
    // HighCharts, JvectorMap, Admin Panels

    // Init Admin Panels on widgets inside the ".admin-panels" container

    $('.admin-panels').adminpanel({
      grid: '.admin-grid',
      draggable: false,
      mobile: false,
      callback: function() {
        //bootbox.confirm('<h3>A Custom Callback!</h3>', function() {});
      },
      onFinish: function() {
        // Init Demo settings
        //$('#rolelist .panel-control-color').click();
      },
      onSave: function() {
        //$(window).trigger('resize');
      }
    });

  });
  </script>
  <!-- END: PAGE SCRIPTS -->
</body>
</html>
